<template>
  <div style="background-color:white">
    <div style="height:1rem;border-bottom:0.02rem solid #E2E2E2;padding-top:0.2rem">
      <label style="margin-top:0.3rem;margin-left:0.3rem;color:#777777;font-size:0.5rem;">剩余车位</label>
      <p style="float:right;padding-right:0.6rem;color:#FB9D0A;font-size:0.5rem;"><strong>102</strong></p>
    </div>

    <div v-if='oldlicence' style="display:flex;padding:0.2rem;margin:0.2rem;">
      <div @click="showKeyboard(0)" :style="{borderColor:inputIndex==0 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
        {{car_number[0]}}
      </div>
      <div @click="showKeyboard(1)" :style="{borderColor:inputIndex==1 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.5em;background:#f1eded">
        {{car_number[1]}}
      </div>
      <div @click="showKeyboard(2)" :style="{borderColor:inputIndex==2 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
        {{car_number[2]}}
      </div>
      <div @click="showKeyboard(3)" :style="{borderColor:inputIndex==3 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
        {{car_number[3]}}
      </div>
      <div @click="showKeyboard(4)" :style="{borderColor:inputIndex==4 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
        {{car_number[4]}}
      </div>
      <div @click="showKeyboard(5)" :style="{borderColor:inputIndex==5 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
        {{car_number[5]}}
      </div>
      <div @click="showKeyboard(6)" :style="{borderColor:inputIndex==6 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
        {{car_number[6]}}
      </div>
    </div>
    <div v-if='newlicence' style="display:flex;padding:0.2rem;margin:0.2rem;">
      <div @click="showKeyboard(0)" :style="{borderColor:inputIndex==0 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
        {{car_number[0]}}
      </div>
      <div @click="showKeyboard(1)" :style="{borderColor:inputIndex==1 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.5em;background:#f1eded">
        {{car_number[1]}}
      </div>
      <div @click="showKeyboard(2)" :style="{borderColor:inputIndex==2 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
        {{car_number[2]}}
      </div>
      <div @click="showKeyboard(3)" :style="{borderColor:inputIndex==3 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
        {{car_number[3]}}
      </div>
      <div @click="showKeyboard(4)" :style="{borderColor:inputIndex==4 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
        {{car_number[4]}}
      </div>
      <div @click="showKeyboard(5)" :style="{borderColor:inputIndex==5 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
        {{car_number[5]}}
      </div>
      <div @click="showKeyboard(6)" :style="{borderColor:inputIndex==6 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
        {{car_number[6]}}
      </div>
      <div @click="showKeyboard(7)" :style="{borderColor:inputIndex==7 && popupKeyboard ? 'red':'#E2E2E2'}" style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
        {{car_number[7]}}
      </div>
    </div>
    <div style="display:flex;float:right;padding-right:0.6rem;">
      <p style="height:1rem;line-height: 1rem;padding:.1rem;color:#777777;">是否新能源</p>
      <x-switch title="" @on-change='neworold' v-model="switchvalue"></x-switch>
    </div>

    <div style="display:flex;align-items:center;margin-top:1.5rem;">
      <div style="flex:1;border-bottom:1px solid #E2E2E2;"></div>
      <div style="margin:0 1rem;font-size:0.4rem;color:#777777;">注意事项</div>
      <div style="flex:1;border-bottom:1px solid #E2E2E2;"></div>
    </div>

    <div style="color:#767676;width:9rem;margin:0 auto;font-size:0.4rem">
      <!-- {{intro}} -->
      <label>1.缴费成功后，请于30分钟内离场，超时需补交停车费<br /></label>
      <div style="padding-top:0.1rem;padding-bottom:0.1rem;">
        <label>2.若车牌识别有误，请到中央收费处缴纳</label>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "bindCar",
      async mounted(){
        document.title = '绑定车辆'

      }
    }
</script>

<style scoped>

</style>
